<template>
  <a-drawer
    v-model:visible="visible"
    title="文件详情"
    width="1000px"
    unmount-on-close
    :footer="null"
    @cancel="visible"
  >
    <a-descriptions bordered :column="1">
      <a-descriptions-item label="文件名称">
        <a @click="downLoadFile"> {{ sysFile.fileName }}</a>
      </a-descriptions-item>
      <a-descriptions-item label="文件类型">
        {{ sysFile.fileType }}
      </a-descriptions-item>
      <a-descriptions-item label="文件大小">
        {{ sysFile.fileSizeShow }}
      </a-descriptions-item>
      <a-descriptions-item label="保存路径">
        {{ sysFile.filePath }}
      </a-descriptions-item>
      <a-descriptions-item label="关联业务">
        <a-tag
          v-for="(item, index) of sysFile.fileBizNames"
          color="blue"
          :key="index"
        >
          {{ item }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="上传人">
        {{ sysFile.createByName }}
      </a-descriptions-item>
      <a-descriptions-item label="上传时间">
        {{ sysFile.createTime }}
      </a-descriptions-item>
    </a-descriptions>
    <div
      v-if="sysFile.fileType === 'jpg' || sysFile.fileType === 'png'"
      style="display: flex; justify-content: center;">
      <a-image
        width="605px"
        style="margin: 0 auto;"
        :title="sysFile.fileName"
        :src="sysFile.previewUrl"
      />
    </div>
    <vue-office-docx
      v-if="sysFile.fileType === 'docx'"
      :src="sysFile.previewUrl"
      style="width: 100%;"
      @rendered="() => {}"
      @error="() => {}"
    />
    <vue-office-excel
      v-if="sysFile.fileType === 'xlsx'"
      :src="sysFile.previewUrl"
      :options="options"
      style="width: 100%;"
      @rendered="() => {}"
      @error="(e) => {console.log(e)}"
    />
    <vue-office-pdf
      v-if="sysFile.fileType === 'pdf'"
      :src="sysFile.previewUrl"
      style="width: 100%; height: 100vh;"
      @rendered="() => {}"
      @error="() => {}"
    />
  </a-drawer>
</template>

<script lang="ts" setup>
import { ref, defineExpose } from 'vue';
import { detailFile, SysFile, downLoad } from '@/api/system/file';
import VueOfficeDocx from '@vue-office/docx';
import VueOfficeExcel from '@vue-office/excel';
import VueOfficePdf from '@vue-office/pdf';
import '@vue-office/docx/lib/index.css';
import '@vue-office/excel/lib/index.css';


const visible = ref(false);

const sysFile = ref<SysFile>({
  fileId: '',
  fileName: '',
  fileType: '',
  fileSizeShow: '',
  filePath: undefined,
  createTime: '',
  createByName: '',
  fileBizNames: [],
  previewUrl: ''
});

const options = {
};

const downLoadFile = () => {
  downLoad(sysFile.value.fileId, sysFile.value.fileName);
}

const open = (fileId: string) => {
  detailFile(fileId).then(res => {
    sysFile.value = res.data;
    visible.value = true;
  });
};

const close = () => {
  visible.value = false;
};

defineExpose({
  open,
  close
});
</script>


<script lang="ts">
export default {
  name: 'DrawerDetail'
};
</script>

<style scoped>

</style>